<template>
  <div class="currencySearchOption">
    <div
      v-for="(item, index) in optione"
      :key="item"
      :class="['aList', index === thisIndex ? 'fst' : '']"
    >
      <a
        href="javascript:void(0);"
        v-html="item"
        @click="setValue(index,$event)"
        :class="[index === 2 ? 'init' : '']"
      ></a>
    </div>
    <!-- 弹出层 -->
    <div :class="['aList', thisIndex === -1 ? 'fst' : '']">
      <a href="javascript:void(0);" @click="setValue(-1, $event)" class="init screen">筛选</a>
    </div>
    <van-popup v-model="show" position="right" :style="{ height: '100%',width:'80%' }">
      <searchPopup @set:Show="(show) => this.show = show" />
    </van-popup>
  </div>
</template>

<script>
// :ref="[index === 2 && 'classList' ]" 问题
// index === 2 时 收集 ref

import searchPopup from "@/components/popup/searchPopup.vue";
export default {
  name: "currencySearchOption",
  components: {
    searchPopup
  },
  data() {
    return {
      optione: ["综合", "销量", "价格", "新品"],
      thisIndex: 1,
      Dom: null,
      show: false
    };
  },
  methods: {
    setValue(index, event) {
      if (index === -1) {
        this.show = true;
      } else {
        this.thisIndex = index;
        let orderBy = "";
        switch (index) {
          case 0:
            orderBy = "zonghe";
            break;
          case 2:
            if (!this.Dom) {
              this.Dom = event.target;
            }
            if (!event.target.classList.contains("pa")) {
              event.target.classList.remove("pd");
              event.target.classList.add((orderBy = "pa"));
            } else {
              event.target.classList.remove("pa");
              event.target.classList.add((orderBy = "pd"));
            }
            break;
          case 3:
            orderBy = "new";
            break;
          default:
            break;
        }
        if (index !== 2 && this.Dom) {
          this.Dom.className = "init";
        }
        let query = this.$route.query;
        this.$router.push({ query: { ...query, orderBy } });
        this.$emit("get:content", orderBy);
      }
    }
  }
};
</script>
<style scoped>
.currencySearchOption {
  background: #fff;
  font-size: 0.24rem;
  line-height: 0.84rem;
  height: 0.84rem;
  padding-bottom: 0.02rem;
  border-bottom: 0.02rem #ccc solid;
}

.aList {
  width: 20%;
  float: left;
  color: #999;
  text-align: center;
}

.aList a {
  display: block;
  width: 100%;
  color: #999;
  float: left;
}

div.fst a {
  color: red;
}

.init {
  box-sizing: border-box;
  padding-right: 0.2rem;
  background: url("../../assets/icon/gray.png") no-repeat 1rem 0.32rem;
  background-size: 0.16rem;
}

.pa {
  background-image: url("../../assets/icon/up-red.png");
}

.pd {
  background-image: url("../../assets/icon/down-red.png");
}

.screen {
  background-image: url("../../assets/icon/select.png");
  background-size: 0.2rem;
}
</style>